<template>

	<view class="home bg#f5">
		<!-- 整个搜索栏 -->
		<view class="search">
			<!-- 地区选择模块 -->
			<view class="picker">
				<!-- 选择器,默认隐藏 -->
				<u-picker @cancel="showLocal = false" @close="showLocal = false" @confirm="localConfirm"
					:show="showLocal" closeOnClickOverlay :columns="columns"></u-picker>
				<!-- 选择按钮 -->
				<u-button iconColor="#8adcff" size="small" type="primary" icon="map" shape="circle"
					@click="showLocal = true" color='#fff'>
					<view class="btn-con">{{local}}</view>
				</u-button>
			</view>

			<!-- 模拟搜索栏,点击跳转搜索页 -->
			<view class="searchsmall" @click="gosearch()">
				<view class="search-life">
					<u-icon name="search" size="22" color="#8adcff"></u-icon>
					<text>州游黔程攻略搜索</text>
				</view>
				<text class="search-right">搜索</text>
			</view>
		</view>

		<!-- 轮播图 -->

		<u-swiper height="420rpx" :list="swiperList" keyName="image" showTitle :autoplay="true" circular
			@change="e => currentNum = e.current" indicatorStyle="right: 20px" @click="swiperGoshow(currentNum)">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
			</view>
		</u-swiper>

		<!-- 宫格 -->
		<view class="grid-box">
			<!-- 纯手写的 -->
			<view class="grid">
				<block v-for="(item,i) in gridList" :key="i">
					<view class="grid-item" @click="gridClick(i)" hover-class="checkActive" hover-stay-time="500">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="grid-text">{{item.text}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 推荐攻略标题 -->
		<view class="titleA">
			<view class="lf">
				<view class="line"></view>
				<text>推荐攻略</text>
			</view>
			<view class="rf">
				<u-tabs :list="list1" @click="clickNav" :activeStyle="{
            color: '#333',
            fontWeight: 'bold',
            transform: 'scale(1.08)'
        }" :inactiveStyle="{
				            color: '#888',
				            transform: 'scale(1)'
				        }" lineColor="#6c5ddc"></u-tabs>
			</view>
		</view>
		<!-- 推荐数据列表 -->
		<view class="loadingState" v-show="loadState">
			<template>
				<u-skeleton :animate="true" rows="4" title loading></u-skeleton>
			</template>
		</view>
		<view class="content1">
			<view class="item" @click="goshow(item._id)" v-for="(item,i) in contentList" :key="i">
				<view class="title">
					{{item.title}}
				</view>
				<view class="item-content">
					<view class="pic">
						<image v-if="item.thumbnail.length" :src="item.thumbnail[0]" mode="aspectFill">
							<image v-else
								src="https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/af7573fa-8064-48f7-a439-d32bf1af2c7c.jpg"
								mode="aspectFill">
					</view>
					<view class="text">
						<view class="introduction">
							{{item.introduction}}
						</view>
						<view class="user-content">

							<uni-dateformat :date="item.publish_date" format="MM-dd hh:mm"
								:threshold="[300000,259200000]">
							</uni-dateformat>

							<view class="user">
								<image class="imageTX"
									:src="item.user_id[0].avatar_file?item.user_id[0].avatar_file.url:'https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/af7573fa-8064-48f7-a439-d32bf1af2c7c.jpg'"
									mode="aspectFill">
								</image>

								<text
									v-if="item.user_id[0].nickname!=''">{{item.user_id[0].nickname||item.user_id[0].username ||item.user_id[0].mobile||'游客'}}</text>
								<text v-else>{{item.user_id[0].username ||item.user_id[0].mobile||'游客'}}</text>
							</view>
						</view>
						<view class="info">
							<view class="browse">
								<uni-icons type="eye" color="#8adcff" size="13"></uni-icons>
								<text>{{item.view_count}}</text>
							</view>
							<!-- <view class="browse">
								<uni-icons type="chat" color="#8adcff" size="13"></uni-icons>
								<text>{{item.comment_count ? item.comment_count:'评论'}}</text>
							</view> -->
							<view class="browse">
								<uni-icons type="star" color="#8adcff" size="13"></uni-icons>
								<text>{{item.like_count?item.like_count:'点赞' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公司标识 -->
		<view class="copyright">
			州游黔程提供计算服务<br />
			COPYRIGHT©2022-2023<br />
			ZhouYouQianCheng
		</view>
		<view class="add" @click="goadd" hover-class="checkActive" hover-stay-time="500">
			<image src="../../static/font/pen.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import json from '@/json';
	const db = uniCloud.database();
	export default {
		components: {},
		data() {
			return {
				// 控制骨架屏显示
				loadState: true,
				list1: [{
					name: '最新',
					type: 'publish_date'
				}, {
					name: '热门',
					type: 'view_count'
				}],
				list1Active: 0,
				daraList: '',
				currentNum: '',
				swiperList: [{ //轮播图数据
						id: '01',
						localCode: 2,
						image: 'https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/af7573fa-8064-48f7-a439-d32bf1af2c7c.jpg',
						title: '【' + '遵义' + '】' + '州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程'
					}, {
						id: '02',
						localCode: 1,
						image: 'https://note.mafengwo.net/img/58/df/d148b69917be69f24a9a6b8d58c0e1f1.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2',
						url: '',
						title: '【' + '贵阳' + '】' + '州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程',

					}, {
						id: '03',
						localCode: 7,
						image: 'https://note.mafengwo.net/img/75/1e/54dde9ff90c528a59f257d3d48f2ee30.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '黔西南' + '】' + '测试标州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程州游黔程题'
					}, {
						id: '04',
						localCode: 8,
						image: 'https://note.mafengwo.net/img/1d/bf/f2c43d2b0b394e0493be8cbac4bab4ce.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '黔东南' + '】' + '测试标题'
					}, {
						id: '05',
						localCode: 5,
						image: 'https://note.mafengwo.net/img/28/6c/59942e734741039dd222165154143fd0.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '毕节' + '】' + '测试标题'
					}, {
						id: '06',
						localCode: 4,
						image: 'https://p1-q.mafengwo.net/s17/M00/03/C8/CoUBXl9-zx6AIktLAAvArXlZs2k087.jpg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '安顺' + '】' + '测试标题'
					},
					{
						id: '07',
						localCode: 3,
						image: 'https://p1-q.mafengwo.net/s17/M00/03/C8/CoUBXl9-zx6AIktLAAvArXlZs2k087.jpg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '六盘水' + '】' + '测试标题'
					},
					{
						id: '08',
						localCode: 9,
						image: 'https://p1-q.mafengwo.net/s17/M00/03/C8/CoUBXl9-zx6AIktLAAvArXlZs2k087.jpg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '黔南' + '】' + '测试标题'
					},
					{
						id: '09',
						localCode: 6,
						image: 'https://p1-q.mafengwo.net/s17/M00/03/C8/CoUBXl9-zx6AIktLAAvArXlZs2k087.jpg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90',
						url: '',
						title: '【' + '铜仁' + '】' + '测试标题'
					}
				],
				gridList: [ //金刚区菜单数据
					{
						img: '../../static/font/qs.png',
						text: '黔俗',

					},
					{
						img: '../../static/font/qq.png',
						text: '黔趣',

					},
					{
						img: '../../static/font/qw.png',
						text: '黔味',

					},
					{
						img: '../../static/font/qzy.png',
						text: '亲子游',

					},
					{
						img: '../../static/font/xcy.png',
						text: '田园游',

					},
					{
						img: '../../static/font/zjy.png',
						text: '自驾游',
					},
				],
				contentList: [], //推荐攻略列表
				showLocal: false, //控制选择器的显示与隐藏
				localCode: 0, //默认贵州，贵州请求全部数据
				local: '贵州', //区域，默认贵州
				columns: [ //贵州省城市数组  索引值为地区代码
					['贵州', '贵阳', '遵义', '六盘水', '安顺', '毕节', '铜仁', '黔西南', '黔东南', '黔南']
				],
			}
		},

		onLoad() {
			this.getIndexData()
		},
		methods: {
			//首次请求推荐数据
			getIndexData() {
				let localData = this.local;
				if (localData == "贵州") {
					var artTemp = db.collection("zyqc_art").field(
						"title,user_id,introduction,view_count,like_count,comment_count,thumbnail,funtype,local,publish_date"
					).getTemp();
				} else {
					var artTemp = db.collection("zyqc_art").where({
						local: localData
					}).field(
						"title,user_id,introduction,view_count,like_count,comment_count,thumbnail,funtype,local,publish_date"
					).getTemp();
				}
				let unseTemp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp();

				db.collection(artTemp, unseTemp).orderBy(this.list1[this.list1Active].type, 'desc').get().then(res => {
					this.contentList = res.result.data
					this.loadState = false
				})
			},
			//swiper跳转
			swiperGoshow(e) {
				let id = this.swiperList[e].id
				this.goshow(id)
			},
			// 使页面可以分享到朋友
			onShareAppMessage(res) {},
			// 分享朋友圈
			onShareTimeline(res) {},

			goadd() {
				uni.navigateTo({
					url: '/pages/add/add'
				})
			},

			gridClick(i, name) {
				uni.navigateTo({
					url: '/pages/list/list?type=' + i + '&localCode=' + this.localCode
				})
			},
			goshow(id) {
				uni.navigateTo({
					url: '/pages/show/show?articleId=' + id
				})
			},
			gosearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			// 监听点击确认后赋值
			localConfirm(e) {
				console.log(e, 111);
				this.local = `${e.value[0]}`
				this.localCode = `${e.indexs[0]}`
				this.showLocal = false
				this.getIndexData()
			},
			// 监听数据改变的方法
			// changeHandler(e) {
			// 	this.local = `${e.value[0]}`
			// 	console.log(e, 222);
			// }

			// 点击最新和热门
			clickNav(e) {
				this.loadState = true;
				this.contentList = [];
				// console.log(e);
				this.list1Active = e.index;
				this.getIndexData();
			}


		}
	}
</script>

<style lang="scss" scoped>
	.u-swiper__wrapper__item__wrapper__title {
		width: 80%;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			// background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		// background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;
		align-items: center;

		&__text {
			color: #FFFFFF;
			font-size: 14px;
		}
	}

	.checkActive {
		opacity: .8;
		background-color: #444343;
	}

	.home {
		background-color: #f5f5f5;

		.loadingState {
			padding: 30rpx;
		}

		.search {
			background-color: #FFF;
			height: 70rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.picker {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.u-button {
					.btn-con {
						font-size: 32rpx;
						color: #6c5ddc;
					}
				}
			}

			.searchsmall {

				display: flex;
				align-items: center;
				flex: 1;

				.search-life {
					padding-left: 16rpx;
					display: flex;
					align-items: center;
					height: 60rpx;
					flex: 1;
					background-color: #fff;
					border: 1rpx solid #6c5ddc;
					border-radius: 100rpx;

					u-icon {
						padding: 0 10rpx;
					}

					text {
						padding-right: 8rpx;
						font-size: 24rpx;
						color: #9EA1C4;
					}

				}

				.search-right {
					width: 100rpx;
					margin-left: 20rpx;
					font-size: 14px;
					// color: #6c5ddc;
					text-align: center;
				}
			}


		}

		// swiper {
		// 	height: 420rpx;

		// 	.swiper-item {
		// 		width: 100%;
		// 		height: 500rpx;

		// 		image {
		// 			width: 100%;
		// 		}
		// 	}
		// }

		.grid-box {
			width: 100%;
			box-shadow: 0rpx 19rpx 12rpx -13rpx #DCDFE6;

			.grid {
				display: flex;
				flex-wrap: wrap;
				width: 100%;



				.grid-item {
					background-color: #fff;
					width: 33%;
					padding: 20rpx 0;
					border-right: 1rpx #e5e5e5 solid;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.grid-text {
						margin-top: 12rpx;
					}
				}


				.grid-item:nth-child(3n) {
					border-right: 1rpx #fff solid;

				}

				.grid-item:nth-child(1),
				.grid-item:nth-child(2),
				.grid-item:nth-child(3) {
					border-bottom: 1rpx #e5e5e5 solid;
				}
			}
		}

		.titleA {
			display: flex;
			justify-content: space-between;
			padding: 16rpx 26rpx 0;
			margin-top: 16rpx;

			.lf {
				color: #282828;
				font-size: 36rpx;
				display: flex;
				line-height: 50rpx;
				margin: auto;
				margin-left: 0rpx;

				.line {
					margin-right: 18rpx;
					// margin-top: 10rpx;
					width: 6rpx;
					// height: 32rpx;
					background-color: #6c5ddc;
				}
			}

			.rf {
				color: #888888;
				font-size: 30rpx;
				padding-top: 4rpx;

				.iconfont {
					margin-left: 4rpx;
					font-size: 26rpx;

				}
			}

		}



		.add {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			position: fixed;
			right: 60rpx;
			bottom: 100rpx;
			background-color: #FFF;
			border-radius: 50%;
			border: 16rpx solid #8adcff;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}


	}
</style>
